import { nextTick, ref } from 'vue'

export default function useAutoScrollToBottom(scrollContainer: ReturnType<typeof ref<HTMLElement | null>>) {
  // // 滚动到底部
  // const scrollToBottom = () => {
  //   if (scrollContainer.value) {
  //     scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
  //   }
  // }

  // // 判断容器是否在底部
  // const isAtBottom = () => {
  //   if (!scrollContainer.value) return false
  //   const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
  //   return scrollTop + clientHeight >= scrollHeight - 10
  // }

  // return {
  //   scrollToBottom,
  //   isAtBottom,
  // }
  // 内部函数，检查当前是否在底部，允许自定义容差
  const isCurrentlyAtBottom = (threshold = 10) => {
    if (!scrollContainer.value) return false
    const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
    return scrollTop + clientHeight >= scrollHeight - threshold
  }

  // 滚动到底部，但如果用户已显著上滑，则不执行
  const scrollToBottom = () => {
    if (scrollContainer.value) {
      // 定义一个较大的容差，用于判断用户是否“显著地”上滑了
      // 例如，视口高度的20%，或者至少50px
      const significantScrollUpThreshold = Math.max(50, scrollContainer.value.clientHeight * 0.2)

      // 如果用户当前位置距离底部超过了这个“显著上滑”的容差，则认为用户主动上滑，不执行自动滚动
      if (!isCurrentlyAtBottom(significantScrollUpThreshold)) {
        return
      }

      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
    }
  }

  // 使用默认的小容差，用于判断是否“紧贴”底部
  const isAtBottom = () => {
    return isCurrentlyAtBottom(10) // 默认10px容差
  }

  return {
    scrollToBottom,
    isAtBottom,
  }
}
